<template>
  <div id="scrolling-list-con">
    <g-banner :title="'卡片列表'" :des="'另一种样式的列表，外表更为美观'"></g-banner>
    <a-affix :target="getScrollingCon">
      <div class="g-title-con">
        <h2 class="g-main-title">卡片列表</h2>
      </div>
    </a-affix>
    <div class="g-box">
      <div class="g-search-simple">
        <el-input v-model="searchInput" placeholder="请输入查询内容" class="g-search-input">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <div class="g-query-mode">
          <el-button slot="reference" type="text" v-if="queryMode" @click="queryMode = false"><i class="el-icon-caret-bottom"></i>更多查询</el-button>
          <el-button slot="reference" type="text" v-else @click="queryMode = true"><i class="el-icon-caret-top"></i>精简查询</el-button>
        </div>
      </div>
      <table class="g-search-advance" border="1" v-if="!queryMode">
        <tr>
          <td width="80px">筛选条件：</td>
          <td>
            <el-tag closable v-for="(item, index) in tags" :key="item.name" @close="handleClose(item, index)" class="g-label-primary">{{item.name}}</el-tag>
          </td>
        </tr>
        <tr>
          <td>行业分类：</td>
          <td>
            <el-radio border v-model="sort" :label="item.value" v-for="(item, index) in sorts" :key="item.name" @click.native="handleToggle(index)">{{item.name}}</el-radio>
          </td>
        </tr>
        <tr>
          <td>业务分类：</td>
          <td>
            <el-radio border v-model="sort2" :label="item.value" v-for="(item, index) in sorts2" :key="item.name" @click.native.prevent="handleSelect(index)">{{item.name}}</el-radio>
          </td>
        </tr>
      </table>
    </div>
    <el-row :gutter="20">
      <div v-for="item in 2" :key="item">
        <el-col :span="12">
          <div class="g-card config-card card-background bg-1">
            <h3>抽取规则配置</h3>
            <p>使用IDIDesigner本身的核心对象步骤，也可以编写java、JavaScript、sql对数据进行处理，一般包含以下几种处理：预处理、数据检验、数据清洗、数据转换、数据比对、数据关联。</p>
            <div class="card-item"><span>应用编码：</span>gateway-service</div>
            <div class="card-item"><span>应用名称：</span>网关服务</div>
            <div class="card-item"><span>申请时间：</span>2019-10-23 15:51:30</div>
            <div class="card-item"><span>申请时间：</span>2019-10-23 15:51:30</div>
            <div class="label-con">
              <span>标签：</span>
              <el-tag v-for="item in tags2" :key="item.name" :type="item.type" effect="plain">{{ item.name }}</el-tag>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="g-card config-card card-background bg-2">
            <h3>上报数据抽取任务启动</h3>
            <p>使用IDIServer作业管理系统，将IDIDesigner定义的抽取任务定时调度或直接启停。 同时，可以查看每个抽取任务的历史执行情况及执行日志。</p>
            <div class="card-item"><span>应用编码：</span>gateway-service</div>
            <div class="card-item"><span>应用名称：</span>网关服务</div>
            <div class="card-item"><span>申请时间：</span>2019-10-23 15:51:30</div>
            <div class="card-item"><span>申请时间：</span>2019-10-23 15:51:30</div>
            <div class="label-con">
              <span>标签：</span>
              <el-tag v-for="item in tags2" :key="item.name" :type="item.type" effect="plain">{{ item.name }}</el-tag>
            </div>
          </div>
        </el-col>
      </div>
    </el-row>
    <el-pagination class="pull-right" layout="total, sizes, prev, pager, next, jumper" style="margin-bottom: 10px" 
      :pager-count="5" :total="50" :page-sizes="[5, 10, 25]" :page-size="5" background></el-pagination>
    <div class="clearfix"></div>
  </div>
</template>
<script>
import { getScrollingCon } from '@/util/common'
import { region } from '../test-data'
export default {
  data() {
    return {
      searchInput: '',
      queryMode: false,
      tags: [],
      sort: '',
      sort2: '',
      sorts: [],
      sorts2: [],
      tags2: [
        { name: '数据检验', type: '' },
        { name: '数据清洗', type: 'warn' },
        { name: '数据转换', type: 'success' },
        { name: '数据对比', type: 'danger' },
      ],
    }
  },
  created() {
    this.handleRegion()
  },
  methods: {
    getScrollingCon,
    handleRegion() {
      this.sorts = [ ...region ]
      for(let i = 0;i<this.sorts.length;i++) {
        for(let j = 0;j<this.sorts[i].subs.length;j++) {
          this.$set(this.sorts[i].subs[j], 'parent', i)
        }
      }
      this.sorts2 = this.sorts[0].subs
    },
    handleToggle(index) {
      this.sorts2 = this.sorts[index].subs
    },
    handleSelect(index) {
      this.tags.push(this.sorts2[index])
      this.sorts2.splice(index, 1)
    },
    handleClose(tag, index) {
      this.tags.splice(index, 1)
      this.sorts[tag.parent].subs.push(tag)
    }
  },
}
</script>